// http://localhost:3000/Blackhole
import React from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import Bank from '../Bank';
import BankCards from './BankCards';
import BankCards1 from './BankCards1';
import { useWallet } from 'use-wallet';
import Button from '../../components/Button';
import styled from 'styled-components';

import banner_blackhole from '../../assets/image/banner_blackhole.png';
import h5banner_blackhole from '../../assets/image/h5banner_blackhole.png'; 
import config from '../../config';
import LaunchCountdown from '../../components/LaunchCountdown';

const Banks: React.FC = () => {
  const { path } = useRouteMatch();
  const { account, connect } = useWallet();

  return (
    <Switch>
      <Page>
        <Route exact path={path}>
          {/* <PageHeader
            icon={<img
            src={banner_nebula}
            alt='logo'
            width={1920}
          />}
            title=""
            subtitle=""
          /> */}
          <StyleDiv1>
        <img
          src={banner_blackhole}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
        <div
          style={{textAlign:'center',color:'orange',fontSize:18,fontWeight:'bold'}}
        >WARNING: YOU CANNOT WITHDRAW ANY USDT FROM BLACKHOLE!</div>
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={h5banner_blackhole}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
        
      </StyleDiv2>
      
          {/* <LaunchCountdown
            deadline={config.bondLaunchesAt}
            description=""
            descriptionLink=""
        /> */}
          {!!account ? (
            <Center2> 
            <BankCards1 />
            <BankCards />
            </Center2>
          ) : (
            <Center>
              <Button onClick={() => connect('injected')} text="Unlock Wallet" />
            </Center>
          )}
        </Route>
        <Route path={`${path}/:bankId`}>
          <Bank />
        </Route>
      </Page>
    </Switch>
  );
};

const Center2 = styled.div`
  @media (max-width: 768px) {
    width: 100%;
  }
`;

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  @media (max-width: 768px) {
    display: none;
  }
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const Center = styled.div`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
`;

export default Banks;
